<template>
    <el-dialog v-model="showDialog" title="会话记录" width="70%" @close="close" >
        <el-row>
        <el-col :span="12">
        <div>
            <!--消息框-->
            <div class ="msgArea" ref="msgAreas" style="height:calc(100vh - 315px); overflow:auto; border: 1px solid #ccc;
                        border-radius: 5px;background-color: #f5f5f5">
                <div v-for="(msg, idx) in chat.msgs">
                    <!--//左边显示的消息消息-->
                    <div v-if="msg.sender == 'client'" class="el-row" style="padding: 5px 0">
                        <div class="el-col el-col-2" style="text-align: right">
                              <span class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;">
                                <img src="@/assets/client-icon.png" style="object-fit: cover;">
                              </span>
                        </div>
                        <div class="el-col el-col-22" style="text-align: left; padding-left: 10px ">
                            <div class="tip left">{{msg.content}}</div>
                            <div class="time">{{moment(msg.createTime).format("yyyy-MM-DD HH:mm:ss")}}</div>
                        </div>
                    </div>
                    <!--边显示的消息-->
                    <div v-if="msg.sender == 'agent'" class="el-row" style="padding: 5px 0">
                        <div class="el-col el-col-22" style="text-align: right; padding-right: 10px">
                            <div class="time">{{moment(msg.createTime).format("yyyy-MM-DD HH:mm:ss")}}</div>
                            <div class="tip right">{{msg.content}}</div>
                        </div>
                        <div class="el-col el-col-2">
                             <span class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;">
                                <img src="@/assets/agent-icon.png" style="object-fit: cover;">
                             </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </el-col>
        <el-col :span="12">
            <ServiceTicket :show="showDialog" :chatId="props.chatId"/>
        </el-col>
        </el-row>
    </el-dialog>
</template>

<script  setup>
    import {ref,reactive,onBeforeUpdate,onUpdated} from 'vue'
    import request from '@/utils/request.js'
    import ServiceTicket from '@/components/business/ServiceTicket.vue'
    import { ElMessage } from 'element-plus'
    import moment from 'moment'
    let props = defineProps(['chatId'])
    let showDialog = ref(false)
    let chat = reactive({msgs:[]})

    onBeforeUpdate( () => {
        if(showDialog.value === true){
            request.get(`/api/chat/getChatMessages/${props.chatId}`).then(resp => {
                chat.msgs = resp;
            })
        }else{
            chat.msgs = [];
        }
    })


    function close(){
        showDialog.value = false
    }
    defineExpose({showDialog})
</script>
<style>
    .tip {
        border-radius: 10px;
        padding: 10px;
        width:auto;
        display:inline-block;
        word-wrap: break-word;
        word-break: break-all;
        text-align:left;
        max-width:60%;
    }
    .time {
        padding: 5px;
        display:inline-block;
        color: #8f9093;
        font-size: 13px;
    }
    .item {
        margin-top: 5px;
    }
    .right {
        background-color:  #a7e861;
    }
    .left {
        background-color:  white;
    }
    .span-box {
        display: flex;
        justify-content: flex-start;
        align-items: center;}
    .btn-bell-badge {
        width: 26px;
        height: 18px;
        margin-left:5px;
        line-height:18px;
        border-radius: 15px;
        background: #f56c6c;}
    .num {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 12px;
        color: #fff;
    }
    .msgArea::-webkit-scrollbar {
        width: 4px;
    }
    .msgArea::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        opacity: 0.2;
        background: fade(@primary-color, 60%);
    }
    .msgArea::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 0;
        background: fade(@primary-color, 30%);
    }
</style>
